<template>
	<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">

		<!-- admin角色 -->
		<el-tab-pane v-if="orgType=='1'" label="销售出库单" name="receive"></el-tab-pane>
		<el-tab-pane v-if="orgType=='1'" label="销售退货/空瓶单" name="empties"></el-tab-pane>
		<el-tab-pane v-if="orgType=='1'" label="配送费用单" name="deliveryFee"></el-tab-pane>
		<el-tab-pane v-if="orgType=='1'" label="押金费用单" name="depositFee"></el-tab-pane>
		<el-tab-pane v-if="orgType=='1'" label="已发送的对账申请" name="send"></el-tab-pane>
		<el-tab-pane v-if="orgType=='1'" label="自动对账结果" name="result"></el-tab-pane>

		<!-- 门店角色  -->
		<el-tab-pane v-if="orgType=='2'" label="要货订单" name="qsReceive"></el-tab-pane>
		<el-tab-pane v-if="orgType=='2'" label="退货/空瓶单" name="qsEmpties"></el-tab-pane>
		<el-tab-pane v-if="orgType=='2'" label="已接收的对账申请" name="qsSend"></el-tab-pane>
		<el-tab-pane v-if="orgType=='2'" label="自动对账结果" name="qsResult"></el-tab-pane>

	</el-tabs>
	<Suspense>
		<template #default>
			<keep-alive>
				<component :is="activeComponent"/>
            </keep-alive>
			
		</template>
		<template #fallback>
			<el-skeleton :rows="3" />
		</template>
	</Suspense>
</template>

<script>
   import { defineAsyncComponent } from "vue";
   import tool from "@/utils/tool";
   export default {
	name:"accountmanage-storeaccount",
	   components: {
		   receive: defineAsyncComponent(() => import("./receive.vue")),
		   send: defineAsyncComponent(() => import("./send.vue")),
		   result: defineAsyncComponent(() => import("./result.vue")),
		   empties: defineAsyncComponent(() => import("./empties.vue")),
		   qsReceive: defineAsyncComponent(() => import("./qsReceive.vue")),
		   qsSend: defineAsyncComponent(() => import("./qsSend.vue")),
		   qsResult: defineAsyncComponent(() => import("./qsResult.vue")),
		   qsEmpties: defineAsyncComponent(() => import("./qsEmpties.vue")), 
		   deliveryFee: defineAsyncComponent(() => import("./deliveryFee.vue")),
		   depositFee: defineAsyncComponent(() => import("./depositFee.vue"))
	   },
	   data() {
		   return {
			   orgType:'',
			   activeName:'', // 初始显示的标签页名称应该对应el-tab-pane的name属性
			   activeComponent: "", // 初始显示的组件名称
		   };
	   },
	   methods: {
		   handleClick(tab, event) {
			this.$nextTick(() => {
      			// 处理标签页点击事件
	  			console.log(tab.props.name); // 输出当前标签页的名称

				this.activeComponent=tab.props.name
			});
			   
		   },
	   },
	   async mounted() {
		   this.orgType = tool.data.get("USER_INFO").AccountType;
		   var type = this.$route.query.type;
		   console.log("!11111111222")
			if (type) {
				this.activeName=type;
				this.activeComponent = type;
			}else{
				this.activeName=this.orgType=='1'?"receive":'qsReceive'
		   		this.activeComponent=this.activeName
			}
	   }
   }
</script>

<style>
</style>
